Vue.component('page',{
    // 选项...
    template:'<ul class="pager pull-right">'+
    '<li ><label>总共{{total}}条</label></li>' +
    '<li ><label>每页{{pagesize}}条</label></li>' +
    '<li v-if="more"><a href="#" v-on:click="loadPage(1)">首页</a></li>' +
    '<li v-if="more" class="previous"><a href="#" v-on:click="loadPage(current-1)">«</a></li>' +
    '<li v-for="v in getRange()" :class="{active:this.current == v}"><a v-on:click="loadPage(v)" href="#">{{v}}</a></li>'+
    '<li v-if="more" class="next"><a href="#" v-on:click="loadPage(current+1)">»</a></li>'+
    '<li v-if="more"><a href="#" v-on:click="loadPage(pageNum)">尾页</a></li>' +
    '</ul>',
    data:function(){
        return {

        };
    },
    props:{
        total: {
            type: Number,
            required: true,
            default:0
        },
        pagesize:{
            type: Number,
            default: 10
        },
        current:{
            type: Number,
            default: 1
        },
    },
    computed:{
        pageNum:function(){
            return Math.ceil(this.total / this.pagesize) ;
        },
        more:function(){
            return this.pageNum > 7  ;
        }
    },
    methods:{
        loadPage:function(n){
            if(n <1){
                n = 1 ;
            }
            if(n > this.pageNum){
                n = this.pageNum ;
            }
            this.$parent.loadPage(n) ;
        },
        getRange:function(){
            var pageNum = this.pageNum ;
            var current = this.current ;
            if(pageNum <= 5){
                return this.range(1,pageNum);
            }
            if(pageNum > 5){
                var tmp = [current -3 , current + 3] ;
                if(tmp[0] < 0 ){
                    return this.range(1,5) ;
                }else if(tmp[1] > pageNum){
                    return this.range(pageNum - 5,pageNum) ;
                }else{
                    return this.range(current -3,current + 3) ;
                }

            }
        },
        range:function(min,max,step){
            var step = step || 1 ;
            var rs = [] ;
            for(var i=min ; i <= max ;){
                rs.push(i) ;
                i += step ;
            }
            console.log(rs) ;
            return rs ;
        }
    }
})
